<!-- 诉求处理页面(企业端) -->
<template>
    <div>
      <!-- <el-page-header @back="goBack"></el-page-header> -->
        <el-form ref="form" :model="form" label-width="140px">
        <el-form-item label="诉求主题">
            <el-input v-model="form.appealthemeName"></el-input>
        </el-form-item>
        <el-form-item label="诉求内容">
            <el-input type="textarea" v-model="form.appealcontent"></el-input>
        </el-form-item>
        <el-form-item label="诉求回复">
        <!-- <div v-for="(item,index) in comple" :key="item" :class="{on:index%2==0,off:index%2!=0}">
          <el-input type="textarea" v-model="item.feedbackcontent"></el-input>
        </div> -->
        <ul class="box">
        <!--利用v-for中的index值，绑定样式来实现隔行变色效果-->
          <li class="box-1" v-for="(item,index) in complete" :class="{on:index%2==0,off:index%2!=0}">{{item.feedbackdepar}}:&nbsp;{{item.feedbackcontent}}</li>
        </ul>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="ruleForm" label-width="140px">
        <el-form-item label="回复内容">
            <el-input type="textarea" v-model="ruleForm.feedbackcontent"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="completeAdd">立即回复</el-button>
            <el-button @click="goBack" type="text" size="small">返回</el-button>
        </el-form-item>
      </el-form>
       

    </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        appealthemeName: '',
        appealcontent: '',
      },
      ruleForm: {
        feedbackcontent: '',
      },
      complete: [],
      selectappealByidUrl: 'http://localhost:8081/appeal/selectappealByid',
      selectCompleteAllbyidUrl: 'http://localhost:8081/appeal/selectCompleteAllbyid',
      completeAddUrl: 'http://localhost:8081/appeal/completeAdd',
    }
  },
  methods: {
 
    // 返回上一层
    goBack () {
      console.log('go back')
      this.$router.go(-1)
    },
    //根据诉求id查询诉求内容
    selectbyId () {
      // alert(this.$route.query.appealid)
      axios.get(this.selectappealByidUrl + '/' + this.$route.query.appealid).then(
        res => {
          console.log(res.data)
          this.form = res.data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },
    //根据诉求id查询所有诉求回复
    selectCompleteAllbyid(){
      axios.get(this.selectCompleteAllbyidUrl + '/' + this.$route.query.appealid).then(
        res => {
          console.log(res.data)
          this.complete = res.data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },
    completeAdd(){
      axios.post(this.completeAddUrl+'/'+this.$route.query.appealid+'/'+this.ruleForm.feedbackcontent+'/1').then(
        res => {
          console.log(res.data)
          if(res.data === 'defail'){
            alert('该诉求已完结，无法添加')
          }else{
            window.location.reload()
          }
         
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

  },
  mounted(){
    this.selectCompleteAllbyid()
    this.selectbyId()
  }
}
</script>

<style>
 .el-input__inner{
    width: 60%;

  }
   /* .el-input{
    text-align: left;
  }*/
  .el-form-item__label{
    /* background-color: rgb(43, 83, 214);
    color: white; */
    text-align: right;
  }
  .el-form-item{
    width: 50%;
    text-align: left;
    margin-top: 20px;
    padding-left: 10px;
  }
  .box-1:nth-of-type(even) {
    /* text-align: right; */
    /* background-color: rgb(197, 190, 190); */
    border-bottom: 1px dashed;
   
   }
   .box-1:nth-of-type(odd) {
    /* background-color: rgb(210, 210, 230); */
    border-bottom: 1px dashed;
   }
   .box{
    list-style: none;
   }
   .el-form{
    margin-top: 40px;
    margin-left: 20px;
   }
   #divform{
    margin-top: 0px;
    margin-left: 90px;
   }

</style>
